<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="navbar.jsp" %> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'contact.jsp' starting page</title>
    <link rel="stylesheet" type="text/css" href="styles/js/select2/select2.css" />
	
	<style>

		
		 .left{
		 	border: 1px dashed #C0C0C0;
		 	width: 500px;
			height: 250px;
		 	position:absolute;
			margin-left:800px;
			z-index:3px;
			background-color:#ddd;
			
		 }
		 .gmap3{
			border: 1px dashed #C0C0C0;
			width: 400px;
			height: 250px;
    </style>
    

    

  
	
	
	
  </head>
  
  <body class="body">
    <div class="container" style="margin-top:60px;width:960px;margin-left:auto;margin-right:auto;">
	  <div class="row">
		
		
		<!-- 导入左侧部分 -->
		<jsp:include page="side.jsp">
			<jsp:param value="contact" name="tag"/>
		</jsp:include>
	
	
		<div class="span9">
			
			<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0">
				<li class="active">

					<a href="task.html"><i class="icon-user"></i>联系人</a>
				</li>
			</ul>
			<div class="wall" style="border:1px solid #ddd;padding:15px">
				<div class="row">
					<div class="span3">

						<a href="pms.jspx?m=new_contact" class="btn span2"><i class="icon-plus"></i>添加联系人</a><br/>
			
						<div class="clear"></div>
						
						
						
			<br/>
			<!--  <form action="pms.jspx?m=select"  name="myform">	
				<div class="control-group">	
					<label class="control-label" for="multiSelect">快速查找联系人</label>
		
		            <div class="controls">
		
		              <select name="contact" id="contact" class="multiSelect" style="width:200px">
						<c:choose>
							<c:when test="${empty contactlist }">
									您还没有添加联系人！
							</c:when>
							
							<c:otherwise>
		              	  		<c:forEach items="${contactlist.result}" var="contact">
		                			<option value="${contact.contactId }" >${contact.contactName }</option>
		                	
		               		 	</c:forEach>
		               		</c:otherwise>
		               </c:choose>
		                
		                
		                
						
		              </select>
		
		            </div>
				</div>	
				
			</form>	
			-->
				<c:choose>
					<c:when test="${empty contactlist }">
								您还没有添加联系人！
					</c:when>
				
					<c:otherwise>
				
						<c:forEach items="${contactlist.result }" var="contact">
						<ul class="unstyled" style="margin-top:15px">
							
							<li style="line-height:30px">
								<i class="icon-list-alt"></i><a href="pms.jspx?m=findcontact&id=${contact.contactId }&p=${param.p}">${contact.contactName }</a>
							</li>
							
						</c:forEach>
					
						
						 ${contactlist.pageNum }/${contactlist.totalPages }
					   	<c:choose>
					   		<c:when test="${contactlist.pageNum==1 }">
					   			首页
					   		</c:when>
					   		<c:otherwise>
					   			<a href="contact.jspx?p=1">首页</a>
					   		</c:otherwise>
					   	</c:choose>
					   	
					   	<c:choose>
					   		<c:when test="${contactlist.pageNum==1 }">
					   			上一页
					   		</c:when>
					   		<c:otherwise>
					   			<a href="contact.jspx?p=${contactlist.pageNum -1}">上一页</a>
					   		</c:otherwise>
					   	</c:choose>
					   	<c:choose>
					   		<c:when test="${contactlist.pageNum==contactlist.totalPages }">
					   			下一页
					   		</c:when>
					   		<c:otherwise>
					   			<a href="contact.jspx?p=${contactlist.pageNum +1}">下一页</a>
					   		</c:otherwise>
					   	</c:choose>
					    
					    <c:choose>
					    	<c:when test="${contactlist.pageNum==contactlist.totalPages }">
					    		尾页
					    	</c:when>
					    	<c:otherwise>
					    		<a href="contact.jspx?p=${contactlist.totalPages }">尾页</a>
					    	</c:otherwise>
					    </c:choose>
					    </c:otherwise>
					</c:choose>
					</div>
					
					
					
					
					<div class="span5" style="min-height:400px;border-left:1px solid #ccc;padding-left:15px">
						
						<address style="display:line">
						
							<c:choose>
								
								
								<c:when test="${empty param.id }">
									<img alt="" src="pms.jspx?m=zxingindex&id=${contactindex.contactId }">
									<h3>${contactindex.contactName }</h3>
									<p>${contactindex.company }</p>
									
									<small>手机</small> ${contactindex.tel }<br/>
									<small>固话</small> ${contactindex.phone }<br/><br/>
									<small>邮箱</small> ${contactindex.email }<br/>
									<small>地址</small> <a id = "myaddress" href = ""  onMouseOut="layer_show('#test1','hide')" onClick="layer_show('#test1','show')">${contactindex.address }</a><br/><br/>
									<small>主页</small> <a href="${contactindex.mainWeb }">${contactindex.mainWeb }</a><br/>
								<small>微博</small> <a href="${contactindex.blog }">${contactindex.blog }</a><br/>
								</c:when>
					
						
							<c:otherwise>
								<img alt="" src="pms.jspx?m=zxing&id=${contact.contactId }">
								<h3>${contact.contactName }</h3>
								<p>${contact.company }</p>
								
								<small>手机</small> ${contact.tel }<br/>
								<small>固话</small> ${contact.phone }<br/><br/>
								<small>邮箱</small> ${contact.email }<br/>
								
								<small>地址</small><a id = "myaddress" href = ""  onMouseOut="layer_show('#test1','hide')" onClick="layer_show('#test1','show')">${contact.address }</a><br/><br/>
								
								
								
	
								<small>主页</small> <a href="${contact.mainWeb }">${contact.mainWeb }</a><br/>
								<small>微博</small> <a href="${contact.blog }">${contact.blog }</a><br/>
								</c:otherwise>
							</c:choose>
							
						</address>
						
						<div id="test1" class="gmap3 mycss"  onMouseOut="layer_show('#test1','hide')" onClick="layer_show('#test1','show')"></div>
							
						
						<div class="line">记录</div>
						<c:forEach items="${recoderlist.result }" var="recoder" begin="0" end="2">
							<blockquote>
								${recoder.desc }
							 
							  <small>${recoder.user.nickName }发布于${recoder.time }</small>
							</blockquote>
						</c:forEach>

						</blockquote>
						<a href="pms.jspx?m=contact_note">查看所有记录</a>
						<br/><br/><br/>
						<a class="btn btn-primary" href="pms.jspx?m=edit_contact&p=${param.p }"><i class="icon-pencil icon-white"></i>编辑</a>
						<a class="btn btn-danger" href="pms.jspx?m=delcontact"><i class="icon-trash icon-white"></i>删除</a>
					</div>
					
				</div>

			</div>
			
			
			
		</div>
	  </div>
	</div>
	
	
	<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
	<script type="text/javascript" src="styles/jquery/jquery.js"></script>
	<script type="text/javascript" src="styles/js/select2/select2.min.js"></script>
    <script type="text/javascript" src="styles/js/gmap3.min.js"></script> 
    
    
	<script type="text/javascript">
		$(document).ready(function(){
			$(".multiSelect").select2();
			$("#btn").click(function(){
				var v=$("#contact").select2("val");
				alert(v);
			});
			
		});
	</script>
	<script type="text/javascript">
	  function layer_show(layer_name,action){
		if(action=="show"){
		   $(layer_name).css("display","block");
		}
		else if(action=="hide"){
		   $(layer_name).style.display='none';
		}

	}
	
  
  </script>
	
	
	
	<script type="text/javascript">
    
	 $(function(){

	$('#test1').gmap3(
	  {
		action: 'addInfoWindow',
		address: $("#myaddress").html(),
		map:{
		  center: true,
		  zoom: 14
		},
		infowindow:{
		  options:{
			size: new google.maps.Size(50,50),
			content: 'Hello World !'
		  },
		  events:{
			closeclick: function(infowindow){
			  alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
			}
		  },
		  apply:[
			{action:'setContent', args:['Here is a new content !']}
		  ]
		}
	  },
	  {action: 'setOptions', args:[{scrollwheel:true}]}
	);
	
	})
     
    </script>  
	
	
	
  </body>
</html>
